<template>
 <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">左下角</div>
 <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">右上角</div>
 <PlayGround v-if="$store.state.pk.status === 'playing'"> 对战页面</PlayGround>
 <MatchGround v-if="$store.state.pk.status === 'matching'" ></MatchGround>
 <ResultBoard v-if="$store.state.pk.loser !== 'none'"></ResultBoard>

</template>
<script>
//引入组件
import PlayGround from '@/components/PlayGround.vue' ;
import MatchGround from '@/components/MatchGround.vue'
import ResultBoard from '@/components/ResultBoard.vue';
//引入函数
import { useStore }from 'vuex' ;
import { onMounted } from 'vue';
import { onUnmounted } from 'vue';

export default {
    components:{
        PlayGround,
        MatchGround,
        ResultBoard
    },
    setup(){
       
        const store = useStore();
        const socketUrl = `wss://app6770.acapp.acwing.com.cn/websocket/${store.state.user.token}`; //服务端,因为使用websocket协议所以ws开头
        store.commit("updateLoser","none")
        store.commit("updateIsRecord",false); //表示不是录像界面
        let socket = null;
        //当组件被挂载时执行
        onMounted(()=>{
            store.commit("updatestatus","matching")
            store.commit("updateOpponent",{
                username:"我的对手",
                photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            });

            socket = new WebSocket( socketUrl);
            //如果链接成功，将socket存储到全局变量
            socket.onopen = ()=>{
                console.log("Connected!");
                store.commit("updateSocket",socket);    
            };
            //接收到服务端发来的信息
            socket.onmessage = msg =>{
                const data = JSON.parse(msg.data);
                if(data.event === "start-matching"){
                    store.commit("updateOpponent",{
                        username:data.opponent_username,
                        photo:data.opponent_photo
                    });
                    //匹配成功后，延时两秒进入对战页面
                    setTimeout(()=>{
                        store.commit("updateStatus","playing");
                    },2000);
                    
                    store.commit("updateGame",data.game)//更新Game:包括玩家信息和地图
                }
                else if ( data.event === "move" ){
                    console.log(data.event);
                    const game = store.state.pk.gameObject;
                    const [snake0,snake1] = game.snakes;

                    console.log(data.a_direction+"  "+data.b_direction)
                    snake0.setDirection(data.a_direction);
                    snake1.setDirection(data.b_direction);
                }
                else if ( data.event === "result" ){
                    const game = store.state.pk.gameObject;
                    const [snake0,snake1] = game.snakes;
                    if( data.loser === "all" || data.loser === "A" ){
                        snake0.status = "die" ;
                    }
                    if( data.loser === "all" || data.loser === "B" ){
                        snake1.status = "die";
                    }

                    store.commit("updateLoser" , data.loser );
                }

            }
            //如果链接断开
            socket.onclose = ()=>{
                console.log("Disconnected!");
               
            }
        });
        //当组件被卸载时执行
        onUnmounted(()=>{
            socket.close();
            store.commit("updateStatus","matching");
            store.commit("updateLoser","none");
        });

    }
}
</script>
<style scoped>
div.user-color{
    /* margin-top: -20px  ; */
    text-align: center;
    color:white;
    font-size: 15px;
    font-weight: 600;
}
</style>